<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-04-30 16:16:21
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-09-29 15:08:31
 * @Description: 我的月卡
 * @FilePath: \parking-mini\src\pages\vip.vue
-->
<template>
    <div class="container">
        <div v-if="!list.length" class="header">暂无月卡</div>
        <div class="card" v-for="item in list" :key="item.id" :style="{ backgroundImage: `url(${imgs.vip})` }" @click="link('/pages/vip_detail', { id: item.id })">
            <div class="number">{{ item.carNumber }}</div>
            <div class="text">{{ item.cardName }}</div>
            <div class="time">{{ item.endTime }}到期 <span v-if="item.isExpire" style="margin-left: 20rpx">(已到期)</span></div>
            <div v-if="!item.isExpire" class="renew" @click.stop="renew(item.id)">续费</div>
        </div>
        <!-- <div class="btn" @click="link('/pages/vip_edit')">
            <img :src="imgs.plus" />
            <span>去开卡</span>
        </div> -->
    </div>
</template>
<script>
import { getVipListAPI, queryOrderAPI, buyVipAPI, updateVipAPI } from "../api/api";
const app = getApp();
export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            list: [],
        };
    },
    onShareAppMessage() {},
    onShow() {
        wx.getStorageInfo({
            success: (res) => {
                let keys = res.keys;
                let unpaidList = keys.filter((item) => item.startsWith("unpaid_trade_no_normal"));
                let unpaidRenewList = keys.filter((item) => item.startsWith("unpaid_trade_no_renew"));

                let requestList = [...unpaidList, ...unpaidRenewList].map((item) => {
                    let paramsStr = wx.getStorageSync(item);
                    let params = paramsStr ? JSON.parse(paramsStr) : {};
                    return item.startsWith("unpaid_trade_no_renew") ? this.queryPayStatus2(params) : this.queryPayStatus(params);
                });

                if (requestList.length) {
                    wx.showLoading({
                        title: "补单中...",
                    });
                    Promise.all(requestList).then((res) => {
                        this.query();
                    });
                } else {
                    this.query();
                }
            },
        });
    },
    methods: {
        query() {
            wx.showLoading({
                title: "加载中...",
            });
            getVipListAPI({
                openId: wx.getStorageSync("parking_openid"),
            }).then((res) => {
                this.list = res;
                wx.hideLoading();
            });
        },
        // 续费
        renew(id) {
            this.link("/pages/vip_edit", { card_id: id });
        },
        // 路由跳转
        link(url, params) {
            uni.$u.route(url, params);
        },
        // 查询订单是否支付 已支付补单 未支付删除
        queryPayStatus(params) {
            return new Promise((resolve, reject) => {
                queryOrderAPI({
                    token: wx.getStorageSync("dada_token"),
                    outTradeNo: params.tradeNo,
                }).then((res) => {
                    if (res) {
                        buyVipAPI(params).then((res) => {
                            // 调用接口成功购买月卡后，删掉缓存中对应的tradeNo
                            console.log("补单缓存订单——", params.tradeNo);
                            wx.removeStorageSync(`unpaid_trade_no_normal_${params.tradeNo}`);
                            resolve(params.tradeNo);
                        });
                    } else {
                        console.log("删除缓存订单——", params.tradeNo);
                        wx.removeStorageSync(`unpaid_trade_no_normal_${params.tradeNo}`);
                        resolve(params.tradeNo);
                    }
                });
            });
        },
        // 续费订单 查询订单是否支付 已支付补单 未支付删除
        queryPayStatus2(params) {
            return new Promise((resolve, reject) => {
                queryOrderAPI({
                    token: wx.getStorageSync("dada_token"),
                    outTradeNo: params.tradeNo,
                }).then((res) => {
                    if (res) {
                        updateVipAPI(params).then((res) => {
                            // 调用接口成功购买月卡后，删掉缓存中对应的tradeNo
                            console.log("补单续费缓存订单——", params.tradeNo);
                            wx.removeStorageSync(`unpaid_trade_no_renew_${params.tradeNo}`);
                            resolve(params.tradeNo);
                        });
                    } else {
                        console.log("删除续费缓存订单——", params.tradeNo);
                        wx.removeStorageSync(`unpaid_trade_no_renew_${params.tradeNo}`);
                        resolve(params.tradeNo);
                    }
                });
            });
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50rpx;
    .header {
        position: relative;
        width: 100%;
        height: 351rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
    }
    .card {
        width: 686rpx;
        height: 351rpx;
        margin-bottom: 46rpx;
        border-radius: 24rpx;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        .renew {
            position: absolute;
            right: 30rpx;
            bottom: 26rpx;
            font-size: 28rpx;
            color: #fff;
            padding: 6rpx 12rpx;
            border-radius: 8rpx;
            border: 1px solid #9a9a9a;
        }
        .number {
            font-size: 72rpx;
            line-height: 1;
            font-weight: bold;
            color: #fff;
            margin-bottom: 18rpx;
            text-align: center;
        }
        .text {
            font-size: 24rpx;
            line-height: 1;
            color: #b1b1b1;
        }
        .time {
            position: absolute;
            left: 25rpx;
            bottom: 27rpx;
            font-size: 24rpx;
            line-height: 1;
            color: #e6e6e6;
        }
    }
    .btn {
        width: 686rpx;
        height: 156rpx;
        box-sizing: border-box;
        border: 4rpx dashed #cccccc;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #0081fe;
        font-weight: bold;
        img {
            width: 25rpx;
            height: 25rpx;
            margin-right: 15rpx;
        }
    }
}
</style>
